<!--图片校验-->
<template>
  <div>
    <slot></slot>
    <Modal
      v-model="modal"
      :mask-closable="false"
      :footer-hide="true"
      width="350"
      :closable="false"
    >
      <slide-verify
        :l="42"
        :r="10"
        :w="310"
        :h="155"
        slider-text="向右滑动完成验证"
        ref="slideblockRef"
        :imgs="picArray"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        style="margin: 0 auto"
      ></slide-verify>
    </Modal>
  </div>
</template>

<script>
export default {
  components: {},
  created() {},
  props: {},
  computed: {},
  mounted() {},
  watch: {},
  data() {
    return {
      modal: false,
      picArray: [
        require("@/assets/verify/1.jpg"),
        require("@/assets/verify/2.jpg"),
        require("@/assets/verify/3.jpg"),
        require("@/assets/verify/4.jpg"),
        require("@/assets/verify/5.jpg"),
        require("@/assets/verify/6.jpg"),
        require("@/assets/verify/7.jpg"),
        require("@/assets/verify/8.jpg"),
      ],
    };
  },
  methods: {
    innuser() {
      this.modal = true;
      this.onRefresh();
    },
    //验证成功
    onSuccess() {
      this.modal = false;
      this.$emit("captchaFn");
      setTimeout(() => {
        this.$refs.slideblockRef.reset();
      })
    },
    // 验证失败
    onFail() {
      this.onRefresh();
    },
    // 刷新验证码
    onRefresh() {
      setTimeout(() => {
        this.$refs.slideblockRef.reset();
      })
    },
  },
};
</script>
